<script setup lang="ts">
import { onMounted, ref,watch } from "vue"
import Editor from "@tinymce/tinymce-vue"
import { reqAddNotice, reqNoticeRoleList } from "@/api/notice/notice"
import { NoticeRoleResponse, noticeResponse,RoleList } from "@/api/types/notice"
import type { CheckboxValueType } from 'element-plus'
// 富文本key
const key = ref("yl5r5p6e4lc4581x65d5jini9k6mas70nsfxyurf20k1itib")
// 通知标题
const noticeTitle = ref("")
// 通知内容
const noticeMessage = ref("")
// 选中时间
const selectTime = ref<any>([])
// 富文本配置
const init = {
  toolbar_mode: "sliding",
  language: "zh_CN",
  plugins:
    "autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount",
  toolbar:
    "undo redo | bold italic underline | alignleft aligncenter alignright | bullist numlist | image link | code",
  tinycomments_mode: "embedded",
  tinycomments_author: "Author name",
  mergetags_list: [
    { value: "First.Name", title: "First Name" },
    { value: "Email", title: "Email" },
  ],
  ai_request: ( 
    // @ts-ignore
    request: any,
    respondWith: any) =>
    respondWith.string(() =>
      Promise.reject("See docs to implement AI Assistant")
    ), // 注意这里的单引号替换了双引号
}
// 下拉全选
const checkAll = ref(false)
const indeterminate = ref(false)
const selectList = ref<string[]>([])
const cities =ref<RoleList[]>([])

// 获取全部角色信息
const getRoleList = async ()=> {
    const result:NoticeRoleResponse = await reqNoticeRoleList()
    cities.value =result.data.roleList   
}

// 重置信息
const reset =()=> {
    noticeTitle.value = ""
    noticeMessage.value = ""
    selectTime.value = []
    selectList.value =[]
}

// 提交通知内容
const postNoticeInfo = async () => {
  if (!noticeTitle.value) {
    return ElMessage.error("未填写标题")
  }
  if (selectTime.value.length <= 0) {
    return ElMessage.error("未选择时间")
  }
  if (selectList.value.length <= 0) {
    return ElMessage.error("未选择通知范围")
  }
  const [startTime, endTime] = selectTime.value
  const params = {
    noticeTitle: noticeTitle.value,
    noticeMessage: noticeMessage.value,
    roleList:selectList.value,
    startTime: startTime,
    endTime: endTime,
  }
  const result: noticeResponse = await reqAddNotice(params)
  if (result.code == 201) {
    ElMessage.success(result.msg)
    reset()
    return
  }
  ElMessage.error(result.msg)

}
// 监听数据变化
watch(selectList, (val) => {
  if (val.length === 0) {
    checkAll.value = false
    indeterminate.value = false
  } else if (val.length === cities.value.length) {
    checkAll.value = true
    indeterminate.value = false
  } else {
    indeterminate.value = true
  }
})

// 全选列表
const handleCheckAll = (val: CheckboxValueType) => {
  indeterminate.value = false
  if (val) {
    selectList.value = cities.value.map((_) => _.roleName)
  } else {
    selectList.value = []
  }
}
onMounted(()=> {
    getRoleList()
})
</script>

<template>
  <div class="notice">
    <el-card>
      <el-form>
        <el-row>
          <el-col :span="12">
            <el-form-item label="通知标题">
              <el-input
                v-model="noticeTitle"
                placeholder="请输入通知标题"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="通知时限">
              <el-date-picker
                v-model="selectTime"
                type="datetimerange"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                format="YYYY-MM-DD HH:mm:ss"
                date-format="YYYY/MM/DD ddd"
                time-format="A hh:mm:ss"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="用户范围">
                    <el-select
                    v-model="selectList"
                    multiple
                    clearable
                    collapse-tags
                    placeholder="请选择通知角色范围"
                    popper-class="custom-header"
                    :max-collapse-tags="1"
                    >
                    <template #header>
                        <el-checkbox
                            v-model="checkAll"
                            :indeterminate="indeterminate"
                            @change="handleCheckAll"
                        >
                            全部
                        </el-checkbox>
                    </template>
                        <el-option
                        v-for="item in cities"
                        :key="item._id"
                        :label="item.roleName"
                        :value="item.roleName"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
      </el-form>

      <main id="sample">
        <Editor :api-key="key" :init="init" v-model="noticeMessage" />
      </main>
      <el-row class="emit">
        <el-col :offset="19">
          <el-button type="info" @click="reset">重置</el-button>
          <el-button
            type="primary"
            @click="postNoticeInfo"
            :disabled="noticeMessage ? false : true"
            >发布</el-button
          >
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.notice {
  .el-card {
    @media (max-width: 1024px) {
      #sample {
        display: flex;
        flex-direction: column;
        place-items: center;
        width: 100%;
      }
    }
  }
  .emit {
    margin-top: 20px;
  }
}
</style>
